<template>
  <button :class="classes" :type="type" @click="handleClick" :disabled="disabled" :lay-submit="laySubmit" :lay-filter="filter" >
    <Icon :name="icon" v-if="icon"></Icon>
    <span v-if="showSlot" ref="slot">
      <slot></slot>
    </span>
  </button>
</template>
<script>
import Icon from '../icon'
import { oneOf } from '../../utils/tool'

export default {
  components: { Icon },
  name: 'button',
  props: {
    icon: String,
    type: {
      default: 'button',
      validator (value) {
        return oneOf(value, ['button', 'submit', 'reset'])
      }
    },
    className: {
      default: '',
      type: String
    },
    laySubmit: Boolean,
    size: {
      type: String,
      validator (value) {
        return oneOf(value, ['big', 'small', 'mini'])
      }
    },
    filter: String,
    disabled: Boolean
  },
  data () {
    return {
      showSlot: true
    }
  },
  computed: {
    classes () {
      let style = 'layui-btn'
      style += this.className !== '' ? ` layui-btn-${this.className}` : ''
      style += this.size !== undefined ? ` layui-btn-${this.size}` : ''
      style += this.disabled ? ` layui-btn-disabled` : ''
      return style
    }
  },
  mounted () {
    this.showSlot = this.$slots.default !== undefined
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>

